/*
 *
 * (c) Copyright Ascensio System Limited 2010-2018
 *
 * This program is freeware. You can redistribute it and/or modify it under the terms of the GNU 
 * General Public License (GPL) version 3 as published by the Free Software Foundation (https://www.gnu.org/copyleft/gpl.html). 
 * In accordance with Section 7(a) of the GNU GPL its Section 15 shall be amended to the effect that 
 * Ascensio System SIA expressly excludes the warranty of non-infringement of any third-party rights.
 *
 * THIS PROGRAM IS DISTRIBUTED WITHOUT ANY WARRANTY; WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR
 * FITNESS FOR A PARTICULAR PURPOSE. For more details, see GNU GPL at https://www.gnu.org/copyleft/gpl.html
 *
 * You can contact Ascensio System SIA by email at sales@onlyoffice.com
 *
 * The interactive user interfaces in modified source and object code versions of ONLYOFFICE must display 
 * Appropriate Legal Notices, as required under Section 5 of the GNU GPL version 3.
 *
 * Pursuant to Section 7 § 3(b) of the GNU GPL you must retain the original ONLYOFFICE logo which contains 
 * relevant author attributions when distributing the software. If the display of the logo in its graphic 
 * form is not reasonably feasible for technical reasons, you must include the words "Powered by ONLYOFFICE" 
 * in every copy of the program you distribute. 
 * Pursuant to Section 7 § 3(e) we decline to grant you any rights under trademark law for use of our trademarks.
 *
*/

@border-color: #D1D1D1;
@active-color: #999999;
@default-color: #EBEBEB;

.profile-photo-block {
    border: 1px solid #BFBFBF;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    float: left;
    margin-top: 10px;
    margin-right: 17px;
    width: 200px;

    .profile-user-photo {
        position: relative;
        width: 200px;

        .profile-action-usericon {
            width: 200px;
            height: 200px;

            img {
                border: none;
                display: block;
                margin: 0 auto;
                max-height: 200px;
                max-width: 200px;
            }

            &.preview {
                overflow: hidden;

                img {
                    margin: 0;
                    max-height: none;
                    max-width: none;
                }
            }
        }

        .action-block {
            border-top: 1px solid #BFBFBF;
            cursor: pointer;
            padding: 8px 0;
            text-align: center;
            vertical-align: middle;
            width: 200px;

            div {
                color: #000;
                display: inline-block;
                font-weight: bold;
                margin-top: 6px;
                vertical-align: middle;
            }
        }
    }

    &.small-window {
        float: none;
        margin-bottom: 24px;
    }
}

.profile-action-userdata 
{
    td {
        padding: 3px 0;
     }    
     .HelpCenterSwitcher {
        margin:0;
        vertical-align: bottom;
     }
    .userdata-field {
        .userdata-title {   
            padding-top: 7px;
            vertical-align: top;
            white-space: nowrap;
            }
        .userdata-value {
            padding-left: 20px;
            padding-bottom: 10px;
            width: 275px;
            
            .nochange {
                cursor: default;
                border-color: transparent;
                }
            .textEdit {
                height: 16px;
                padding: 3px 9px;
                width: 275px;

                &.portalEmail{
                    width: 140px;
                }
            }
            .textEditCalendar {
                margin-right: 5px;
            }
            .requiredFieldError .textEditCalendar + .requiredErrorText {
                display: inline-block;
            }
            .field-with-actions {    
                margin: 3px 0px 5px;               
                .inner-text {    
                    max-width: 375px;
                }    
            }
            .add-new-field {
                margin-top:5px;
            }
            .field-value {
                padding: 2px 0;
            }
        }
    }
}

.delete-field {
    float:right;
    }

.add-new-field {
    display: inline-block;
    margin-left: 3px;
}
#commentContainer textarea 
{
    height:80px;
    min-width: 759px;
    padding: 5px 9px;
    resize: vertical;
}      
body.media-width-0-1200 {
    .profile-action-userdata {
        .userdata-field {
            .userdata-value {
                width: 292px;
            }
        }
    }
    #commentContainer textarea {
        min-width: 660px;
    }
}
.tabs-content {    
    .field-with-actions {
        height:23px;
        margin: 0 0 9px;
        width:570px;
        
        .combobox-title {
            margin-top: 3px;

/*--------Icons for title of contacts----------*/
            &.mail,
            &.extmail{
                background-position: 0 -2px;
            }
            &.phone{
                background-position: 0 -22px;
            }
            &.mobphone,
            &.extmobphone{
                background-position: 0 -42px;
            }
            &.gmail{
                background-position: 0 -62px;
            }
            &.skype{
                background-position: 0 -82px;
            }
            &.msn {
                background-position: 0 -102px;
            }
            &.icq{
                background-position: 0 -122px;
            }
            &.jabber{
                background-position: 0 -142px;
            }
            &.aim{
                background-position: 0 -162px;
            }
            &.facebook {
                background-position: 0 -182px;
            }
            &.livejournal{
                background-position: 0 -202px;
            }
            &.myspace{
                background-position: 0 -222px;
            }
            &.twitter{
                background-position: 0 -242px;
            }
            &.blogger{
                background-position: 0 -262px;
            }
            &.yahoo{
                background-position: 0 -282px;
            }
        }
         
        input {
            height: 16px;
            float:right;
            margin:0 10px;
            padding: 3px 9px;
            width:300px;
        }
    }
    .delete-field {
        margin-top:3px;
        height: 16px;
        }

    .field-with-actions .combobox-title,
    .tl-combobox .combobox-container .combobox-options .option-item {        
        background-image: url("images/social-icons-grey.png");
        background-repeat: no-repeat;
        padding-left: 24px;
    }

/*--------Icons for list of contacts----------*/
    .tl-combobox .combobox-container .combobox-options .option-item {
        &.mail,
        &.extmail{
            background-position: 0 2px;
        }
        &.phone{
            background-position: 0 -18px;
        }
        &.mobphone,
        &.extmobphone{
            background-position: 0 -38px;
        }
        &.gmail{
            background-position: 0 -58px;
        }
        &.skype{
            background-position: 0 -78px;
        }
        &.msn {
            background-position: 0 -98px;
        }
        &.icq{
            background-position: 0 -118px;
        }
        &.jabber{
            background-position: 0 -138px;
        }
        &.aim{
            background-position: 0 -158px;
        }
        &.facebook {
            background-position: 0 -178px;
        }
        &.livejournal{
            background-position: 0 -198px;
        }
        &.myspace{
            background-position: 0 -218px;
        }
        &.twitter{
            background-position: 0 -238px;
        }
        &.blogger{
            background-position: 0 -258px;
        }
        &.yahoo{
            background-position: 0 -278px;
        }
    }
}

.field-with-actions.default {
    display:none;
} 

#ui-datepicker-div {
    z-index:10 !important;
    }


#chooseGroupsSelector {
    display: inline-block;
    margin-top: 3px;
}

.departments-list li {
    &:first-child {
        margin-top: 5px;
    }
}

#AnswerForEmail {
    p {
        padding-top: 8px;

        &:first-of-type {
            padding-top: 0;
        }
    }
}

.moduleInfo {
    width: 100%;
    border-collapse: collapse;

    td {
        padding: 8px 0;
    }

    .tableHead {
        border-bottom: 1px solid #83888d;
    }

    .moduleName {
        width: 40%;
    }

    .userType {
        width: 30%;
    }

    .access {
        width: 16px;
        margin-right: 8px;
        display: inline-block;
        background-color: #83888D;

        &.full {
            -webkit-mask-image: url(images/edit.svg);
            mask-image: url(images/edit.svg);
        }

        &.read {
            -webkit-mask-image: url(images/text-bubble.svg);
            mask-image: url(images/text-bubble.svg);
        }

        &.write {
            -webkit-mask-image: url(images/read-only.svg);
            mask-image: url(images/read-only.svg);
        }

        &.check {
            -webkit-mask-image: url(images/check_tick.svg);
            mask-image: url(images/check_tick.svg);
        }
    }
}

.text-alignment {
    padding-top: 4px;
}

#inputUserEmail,
#inputPortalEmail,
.validationField {
    position: relative;

    .emailInfo,
    .validationText {
        display: none;
        position: absolute;
        width: 300px;
        top: 4px;
        left: 306px;
        color: #B40404;
    }
}

#generatedPassword {
    height: 44px;
}

.validationBlock {
    display: none;
    position: relative;
    height: 44px;

    #clip {
        position: absolute;
        left: -1000px;
    }

    #copyValues {
        border-bottom: 1px dotted black;
        cursor: pointer;

        &.disabled {
            pointer-events: none;
            cursor: default;
            text-decoration: none;
            color: #aaa;
        }
    }

    #password {
        position: relative;
        width: 139px;
        padding-right: 30px;
    }

    #bubleBlock {
        position: absolute;
        left: 214px;
        top: -4px;

        #passwordInfo {
            width: 180px;
            padding: 8px 12px 10px;
            box-shadow: 0 1px 5px rgba(0,0,0,0.5);
            position: relative;
            background: white;

            :before,
            :after {
                content: '';
                position: absolute;
                background: white;
                left: -5px;
                top: 12px;
                width: 10px;
                height: 10px;
                box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
                z-index: -1;
                transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
            }

            :before {
                z-index: 1;
                box-shadow: none;
            }

            .infoItem {
                color: #A9ADB0;
                padding-left: 6px;

                &.red {
                    color: #B40404;
                }

                &.green {
                    color: #44BB00;
                }
            }
        }
    }

    .validationProgress {
        position: absolute;
        width: 0px;
        max-width: 180px;
        height: 2px;
        top: 23px;
    }

    .infoPanel {
        display: none;
        background: white;
        width: 178px;
        box-shadow: 0 1px 5px rgba(0,0,0,0.5);
    }

    .infoChecking {
        margin-left: 4px;
        display: inline-block;

        &#passwordGen {
            width: 16px;
            background-color: #83888D;
            -webkit-mask-image: url(images/rotate.svg);
            mask-image: url(images/rotate.svg);
        }
    }

    input[type="checkbox"] {
        display: none;
    }

    #passwordShowLabel {
        position: absolute;
        top: 4px;
        left: 156px;
        width: 16px;
        background-color: #83888D;

        &.show {
            -webkit-mask-image: url(images/access-deny.svg);
            mask-image: url(images/access-deny.svg);
        }

        &.hide {
            -webkit-mask-image: url(images/read-only.svg);
            mask-image: url(images/read-only.svg);
        }
    }

        #passwordShowLabel::before {
            content: "\00a0";
        }
}